
<div class="page-header no-breadcrumb font-header">文章阅读数统计</div>
<div class="content-wrap list-inline ta">
    <div class="panel panel-default">

        <!--panel-heading-->
        <div class="panel-heading font-header">
            <a href="/statistics" class="btn btn-success btn-flat">文章阅读数统计</a>
            <a href="/statistics/category" class="btn btn-info btn-flat">栏目点击量统计</a>
        </div>
        <!--panel-heading-->

        <!--panel-body-->
        <div class="panel-body">
            <div class="row common-padding">
                <div class="col-sm-1">
                    <label class="commonlabel">当前用户</label>
                </div>
                <div class="col-sm-11">
                    <div class="form-group">
                        <div class="btn-padding inblock showItem username">
                            <a  class="btn btn-warning btn-flat">用户</a>
                        </div>
                        <div class="btn-padding inblock">
                            <a class="btn btn-default btn-flat click-po-btn" href="#0">切换用户</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row common-padding showItem">
                <div class="col-sm-1">
                    <label class="padding-right">栏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目</label>
                </div>
                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-sm-4">
                            <select class="form-control chosen-select font-12" tabindex="-1" aria-hidden="true">
                                <option>全部</option>
                                <option>一级栏目</option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control chosen-select font-12" tabindex="-1" aria-hidden="true">
                                <option>全部</option>
                                <option>二级栏目</option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control chosen-select font-12" tabindex="-1" aria-hidden="true">
                                <option>全部</option>
                                <option>三级栏目</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row common-padding showItem">
                <div class="col-sm-1">
                    <label class="padding-right">文章名称</label>
                </div>
                <div class="col-sm-10">
                    <input type="text" placeholder="搜索内容" class="form-control">
                </div>
            </div>
            <div class="row common-padding showItem">
                <div class="col-sm-1">
                    <label class="commonlabel">统计周期</label>
                </div>
                <div class="col-sm-5">
                    <input type="text" id="datetimepicker1" class="form-control font-12"
                           placeholder="请选择时间">
                    <span aria-hidden="true" class="fa fa-calendar h4 form-control-feedback"></span>
                </div>
                <div class="col-sm-5">
                    <input type="text" id="datetimepicker2" class="form-control font-12"
                           placeholder="请选择时间">
                    <span aria-hidden="true" class="fa fa-calendar h4 form-control-feedback"></span>
                </div>
            </div>
            <div class="row common-padding showItem">
                <div class="col-sm-1">
                    <label class="commonlabel">统计时段</label>
                </div>
                <div class="col-sm-11">
                    <label class="radio-inline">
                        <input type="radio" value="option1" id="inlineRadio1" name="inlineRadioOptions"> 不限
                    </label>
                    <label class="radio-inline">
                        <input type="radio" value="option2" id="inlineRadio2" name="inlineRadioOptions"> 日
                    </label>
                    <label class="radio-inline">
                        <input type="radio" value="option3" id="inlineRadio3" name="inlineRadioOptions"> 周
                    </label>
                    <label class="radio-inline">
                        <input type="radio" value="option4" id="inlineRadio4" name="inlineRadioOptions"> 月
                    </label>
                </div>
            </div>
        </div>

        <!--panel-body-->

        <!--table-responsive-->
        <div class="table-responsive overflow-x showTable">
            <div id="datatable_wrapper" class="dataTables_wrapper dt-bootstrap no-footer">
                <!--row-->
                <div class="row common-body common-ptop">
                    <div class="col-sm-12 common-padding">
                        <div class="btn-group" role="group" aria-label="">
                            <a class="btn btn-default">10条</a>
                            <a class="btn btn-default">20条</a>
                            <a class="btn btn-default">50条</a>
                        </div>
                    </div>
                    <div class="col-sm-12 table-items">
                        <table aria-describedby="datatable_info" class="table table-striped font-12 dataTable no-footer">
                            <thead>
                            <tr>
                                <th>用户</th>
                                <th class="text-center">文章</th>
                                <th class="text-center">所属栏目</th>
                                <th class="text-center">阅读数</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>title1</td>
                                <td class="text-center">cate1</td>
                                <td class="text-center">政务公开</td>
                                <td class="text-center">15896</td>
                                <td class="text-center datainfo"><a href="#">预览</a></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <!--row-->

                <!--row-->
                <div class="row">
                    <div class="col-sm-7">
                        <div class="dataTables_paginate paging_simple_numbers" id="datatable_paginate">
                            <ul class="pagination">
                                <li class="paginate_button previous disabled" id="datatable_previous"><a href="#"
                                                                                                         aria-controls="datatable"
                                                                                                         data-dt-idx="0"
                                                                                                         tabindex="0">上一页</a>
                                </li>
                                <li class="paginate_button active"><a href="#" aria-controls="datatable"
                                                                      data-dt-idx="1" tabindex="0">1</a></li>
                                <li class="paginate_button "><a href="#" aria-controls="datatable" data-dt-idx="2"
                                                                tabindex="0">2</a></li>
                                <li class="paginate_button next" id="datatable_next"><a href="#"
                                                                                        aria-controls="datatable"
                                                                                        data-dt-idx="3"
                                                                                        tabindex="0">下一页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--row-->
            </div>
        </div>
        <!--table-responsive-->

    </div>
</div>






<div class="cd-popup click-alert" role="alert">
    <div class="cd-popup-container cd-width">
        <div class="panel panel-orange no-bordered">
            <div class="panel-heading">
                <div class="title"><h3 class="alert-title">切换用户</h3></div>
            </div>
            <div class="panel-body alertscroll">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="input-group pull-right common-padding">
                            <input type="text" placeholder="搜索用户" class="form-control">
                            <span class="input-group-btn font-12">
                            <button type="button" class="btn btn-flat btn-danger">搜索</button>
                          </span>
                        </div>
                    </div>
                </div>
                <!--row end-->
                <div class="row">
                    <div class="col-sm-12">
                        <table aria-describedby="datatable_info" class="table table-striped font-12 dataTable no-footer listData">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th class="text-center">登录用户名</th>
                                <th class="text-center">机构名称</th>
                                <th class="text-center">所在地区</th>
                                <th class="text-center">联系人</th>
                                <th class="text-center">联系人电话</th>
                                <th class="text-center">设备数量</th>
                                <th class="text-center">状态</th>
                            </tr>
                            </thead>
                            <tbody class="tbady">

                            </tbody>
                        </table>
                    </div>
                </div>
                <!--row end-->
            </div>
        </div>
        <a href="#" class="cd-popup-close fa fa-2x fa-plus-circle text-white"></a>
    </div> <!-- cd-popup-container -->
</div>

<script>
    function changeUser(id){
        var tr =  $(".tbady").find("#user_"+id);
        $(".username a").html(tr.find("td").eq(1).html());
        $(".showItem input").prop("disabled", false);
        $(".chosen-select").prop("disabled", false);
        $('.click-alert').removeClass('is-visible');
        $(".username").show();
        $(".showTable").show();

    }
    $(function(){
        $(".username").hide();
        $(".showItem input").prop("disabled", true);
        $(".chosen-select").prop("disabled", true);
        $(".showTable").hide();
        $.ajax({
            url:'http://localhost:3000/users/userlist',
            success:function(res){
                var html='';
                for(var i=0;i<res.length;i++)
                {
                    var obj = res[i];
                    var status = obj.status*1 ? '启用' : '关闭';
                    html+='<tr id="user_'+obj.id+'"><td>'+obj.id+'</td>' +
                            '<td>'+obj.username+'</td> ' +
                            '<td>'+obj.jg+'</td> ' +
                            '<td>'+obj.area+'</td> ' +
                            '<td>'+obj.contact+'</td>' +
                            '<td>'+obj.tel+'</td>' +
                            '<td>'+obj.deviceNum+'</td>' +
                            '<td>'+obj.status+'</td> ' +
                            '<td><button class="btn btn-success btn-flat" type="submit" onclick="changeUser('+obj.id+')">确定</button></td></tr>';
                }
                $(".tbady").html(html);

            }
        });
    })
</script>


